<template>
    <div class="PayBox">
    <div class="bnh-forget-item border flex flex-align-center">
        <img src="@/assets/img/forget-tel.png" alt="">
        <input type="number" placeholder="请输入手机号" v-model='phone'>
        <div class="bnh-getCode flex flex-align-center flex-pack-center" :class='{active:isGetCode}' @click="getCode"><p>{{erCodeId}}</p></div>
     </div>
     <div class="bnh-forget-item border flex flex-align-center">
        <img src="@/assets/img/forget-ercode.png" alt="">
        <input type="number" placeholder="请输入验证码" v-model="ercode">
     </div>
    <div class="bnh-login-btn flex flex-align-center flex-pack-center" @click='onPay'>
        <p>立即支付(需支付￥888)</p>
    </div>
    </div>
</template>
<script>
	import http from '../utils/http'
	import api from '../utils/api'
	import utils from '../utils/utils'
export default {
      created(){ //页面初始化时修改网页标题
			window.document.title = '申请成为服务商';
      },
      data(){
          return{
            paySign:'', // 微信签名
            appId:'', // 公众号名称，由商户传入
            timeStamp:'', // 时间戳，自1970年以来的秒数
            nonceStr:'', // 随机串
            packageStr:'', // 微信支付参数
            signType:'', // 微信签名方式
            ercode:'', // 验证码
            erCodeId:'获取验证码', //获取验证码按钮
            isCode:true, //获取验证码按钮状态
            phone:'',//手机号
          }
      },
     computed:{
        isGetCode:{
            get:function(){
                if(utils.isPoneAvailable(this.phone)){
                    return this.isCode;
                }else{
                    return  false;
                }
            }
        }
    },
      methods:{
          onPay:async function(){ //支付
                if(this.phone =='' || this.ercode==''){
                    this.$vux.toast.text('手机号/验证码输入有误', 'middle');
                }else{
                    let dealerId = '';
                    if(utils.getQueryString('dealerId')==undefined){
                        dealerId = utils.getQueryString('dealerId');
                    }
                    let params = { phone: this.phone,verifyCode:this.ercode,openId:localStorage.openId,dealerId:dealerId}
                    this.$vux.toast.text(params.phone, 'middle');
                    this.$vux.toast.text(params.verifyCode, 'middle');
                    this.$vux.toast.text(params.openId, 'middle');
                    this.$vux.toast.text(params.dealerId, 'middle');
                    const res = await http.post(api.wxPay, params);
                    if (res.data.success) {
                        var resultDate = JSON.parse(res.data.wxPayVO.dataSource);
                         this.appId = resultDate.appId;
                         this.paySign = resultDate.paySign;
                         this.timeStamp = resultDate.timeStamp;
                         this.nonceStr = resultDate.nonceStr;
                         this.packageStr = resultDate.package;
                         this.signType = resultDate.signType;
                         this.callpay();
					}else{
                        this.$vux.toast.text('统一下单失败', 'middle');
                    }
                }           
          },
          callpay(){
            if (typeof WeixinJSBridge == "undefined"){
                if( document.addEventListener ){
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                }else if (document.attachEvent){
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            }else{
                this.onBridgeReady();
            }
          },
          onBridgeReady(){
             WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId" : this.appId,       //公众号名称，由商户传入
                    "timeStamp":this.timeStamp, //时间戳，自1970年以来的秒数
                    "nonceStr" : this.nonceStr, //随机串
                    "package" : this.packageStr,
                    "signType" :this.signType,  //微信签名方式：
                    "paySign" : this.paySign     //微信签名

                },
                function(res){
                    if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                        this.$vux.toast.text('支付成功', 'middle');
                        setTimeout(function(){window.location.href='https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU2MTU1NTgxMg==&scene=124#wechat_redirect'},3000);
                    }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
                        this.$vux.toast.text('取消支付', 'middle');
                    }else if(res.err_msg == "get_brand_wcpay_request:fail" ){
                        this.$vux.toast.text('支付失败', 'middle');
                    }
                }
            );
          },
          // 获取验证码
			getCode: async function(){
				let _this = this;
                if(_this.isGetCode){
                    let params = { phone: _this.phone}
                    const res = await http.get(api.sendSms, params);
                    	if (res.data.success) {
                                   _this.$vux.toast.text('验证码已发送', 'middle');
                                    let num = 60;
                                    let timer = setInterval(function () {
                                    num--;
                                    _this.isCode = false;
                                    _this.erCodeId = `${num}s`;
                                    if (num === 0) {
                                        _this.isCode = true;
                                        _this.erCodeId = `重新获取`;
                                        clearInterval(timer);
                                    }
                                }, 1000);
							}else{
                                 this.$vux.toast.text(res.data.message, 'middle');
                            }
                }
			},
      }
}
</script>
<style scoped>
.PayBox{padding: 0 0.24rem}
.bnh-forget-item{height: 1.2rem}
.bnh-forget-item img{width: 0.37rem;height: auto;margin-left: 0.1rem;}
.bnh-forget-item input{width: 4rem;margin-left: 0.2rem;padding-left: 0.1rem;border:none}
.bnh-getCode{height: 0.6rem;width: 1.8rem;border-radius: 15px;background: #ccc;color: #fff;text-align: center;font-size: 0.28rem;line-height: 0.6rem;margin-left: 0.2rem}
.bnh-login-btn{height: 0.95rem;width: 7rem;margin: 0 auto;border-radius: 25px;background: #ffaf3c;color: #fff;font-size: 0.32rem;margin-top: 0.66rem}
.active{background: #ffaf3c}
</style>


